<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>组件化</title>
    <style>
        .box{
             width: 100px;
             height: 100px;
             background-color: #00FF00;
            margin-top: 20px;
             text-align: center;
             line-height: 100px;
        }
    </style>


</head>
<body>

<div id="app">

    <div class="box" @click="boxClick">{{counter}}</div>
    <div class="box">{{counter}}</div>
    <div class="box">{{counter}}</div>

    <counter></counter>

    <counter></counter>
    <counter></counter>

    <counter2></counter2>
</div>
</body>

<script src="../../lib/vue.global.js"></script>
<script src="component/counter2.js"></script>
<script>

  var app=  Vue.createApp({
        components: {counter2:counter2},
        data:function (){
            return {

            }
        },methods:{

      }
    })

  /**
   *   组件  --- 独立的ui单元，独立数据、模版、方法等
   *    组件的注册 ：
   *        全局注册
   *        局部注册
   * */




  app.component('counter',{
      data:function (){
        return {
            counter:0
        }
      },
      template:'   <div class="box" @click="boxClick">{{counter}}</div>',
      methods:{
          boxClick:function (){
              this.counter++;
          }
      }
  })

  app.mount('#app')



</script>

</html>